<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>guai</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/angular.js"></script>
    <script>
        angular.module("mymd",[]).controller("mycn",[function () {
            this.hello="Hello World";

            this.msg= function () {
                this.hello="Hello AnguralJs";
            };

            this.mydatas = [
                {"id":1,"name":"张三","age":23},
                {"id":2,"name":"张四","age":13}
            ];

            var myindex=-1;

            this.addbtn= function () {
                var data={"id":this.id,"name":this.name,"age":this.age};
                this.mydatas.push(data);
            };

            this.btnclick= function () {
                if(this.btn=="添加"){
                    this.addbtn();
                }else{
                    this.updateData();
                    this.btn="添加";
                }
            }

            this.modData=function(index){
                var data=this.mydatas[index];
                this.id= data.id;
                this.name= data.name;
                this.age= data.age;
                this.myindex=index;
                this.btn="修改"
            };

            this.updateData= function () {
                var data={"id":this.id,"name":this.name,"age":this.age};
                this.mydatas[this.myindex]=data;
            }

            this.del= function (index) {
                console.log("del"+index);
                this.mydatas.splice(index,1);
            }

            this.id="";
            this.name="";
            this.age="";
            this.btn="添加"
        }])
    </script>
</head>
<body ng-app="mymd" ng-controller="mycn as cn">
<!--<h1>{{cn.hello}}</h1>-->
<!--<h2 ng-bind="cn.hello" ng-click="cn.msg()"></h2>-->
<form>
    <input ng-model="cn.id"><br>
    <input ng-model="cn.name"><br>
    <input ng-model="cn.age"><br>
    <button class="btn btn-primary" type="button" ng-click="cn.btnclick()">{{cn.btn}}</button>
    <!--<input type="button" value="修改" ng-click="cn.updateData()">-->
</form>
<div class="col-md-6">
    <table class="table col-md-6 table-bordered">
        <tr><td>序号</td><td>姓名</td><td>年龄</td><td>操作</td></tr>
        <tr ng-repeat="data in cn.mydatas">
            <td>{{data.id}}</td>
            <td>{{data.name}}</td>
            <td>{{data.age}}</td>
            <td><span ng-click="cn.modData($index)">修改</span>/<span ng-click="cn.del($index)">删除</span></td>
        </tr>
    </table>
</div>
</body>
</html>